- Поиск на Youtube Быстрый поиск видео на Youtube.
- Фоторедактор Здесь вы можете отредактировать свои изображения перед размещением их на фотохостинге. Многофункциональный онлайн-инструментарий.
- iPleer.fm Здесь вы можете найти практически любую песню.
- Гид по сайту Тема о новых опциях на сайте с инструкциями и иллюстрациями.
- Наша беседка В этой теме можете задать любой интересующий вопрос относительно сайта и не только.
- Техподдержка В этом разделе Вы можете создать тему технического характера, связанных с компьютерами, телефонами и интернетом.
Последние темы
Любимые темы
Загрузка избранного...
Страница 1 из 1 • Поделиться
Подсветка синтаксиса
Syntax Highlighter
Расположение- Предназначены для соответствующих мест, где вы научитесь применять эффекты JavaScript на форумах. В нашем случае, мы будем применять На всех страницах.
Расположение- Предназначены для соответствующих мест, где вы научитесь применять эффекты JavaScript на форумах. В нашем случае, мы будем применять На всех страницах.
- Код:
jQuery(function () {
var sCSS = '<style>' +
'/***' +
'* Синтаксис маркера возможности для Forumotion!' +
'* В CSS: .сайта codebox ДД.cont_code' +
'* (с) http://balupton.github.io' +
'* Версия: 1.28082013-св1.9.1' +
'* Сделано в jscript - 2013/12/16' +
'*/' +
'code.punbb_block, pre.punbb_block {' +
' background-color: #FAFAFA !important;' +
' border: 1px solid #C9C9C9 !important;' +
' color: #000000;' +
' font-family: Consolas,"Bitstream Vera Sans Mono","Andale Mono",Monaco,"DejaVu Sans Mono","Lucida Console",monospace !important;' +
' font-size: 11px !important;' +
' line-height: 100% !important;' +
' max-height: 100px !important;' +
' overflow: auto !important;' +
' padding: 5px !important;' +
' white-space: pre-wrap !important;' +
' width: 90% !important;' +
'}' +
'.punbbtop {' +
' background-color: #FFDEAD !important;' +
' color: #1D3652;' +
' font-size: 10px;' +
' font-weight: bold;' +
' line-height: 110%;' +
' margin-top: 5px;' +
' padding: 2px 1px 2px 3px;' +
' width: 91% !important;' +
'}' +
'.punbbtop button {' +
' background: -moz-linear-gradient(center top , #EDEDED 5%, #DFDFDF 100%) repeat scroll 0 0 #EDEDED;' +
' border: 1px solid #BBBBBB;' +
' border-radius: 3px 3px 3px 3px;' +
' color: #1D3652;' +
' cursor: pointer;' +
' display: inline-block;' +
' font-size: 10px;' +
' padding: 0 6px;' +
' text-decoration: none;' +
'}' +
'.punbbtop button:hover {' +
' background: -moz-linear-gradient(center top , #DFDFDF 5%, #EDEDED 100%) repeat scroll 0 0 #DFDFDF;' +
' border-color: #9A9A9A;' +
' color: #3D70A3;' +
'}' +
'.punbbtop button:active {' +
' position: relative;' +
' top: 1px;' +
'}' +
'pre.punbb_block.expand, code.punbb_block.expand {' +
' max-height: 100% !important;' +
'}' +
'.prettyprint ol.linenums {' +
' padding-left: 15px !important;' +
'}' +
'</style>';
jQuery(sCSS).insertBefore('#page-body');
if (jQuery('.cont_code').length) {
var tagCode = jQuery('.cont_code');
} else {
if (jQuery('.cont_code').length) {
var tagCode = jQuery('.code');
} else {
var tagCode = jQuery('code');
}
}
tagCode.each(function () {
var sContent = jQuery(this).html();
var codebox = jQuery(this).parent().parent();
codebox.before('<div class="punbbtop">Код; <button onclick="punbbExpand(this); return false;">Развернуть</button><button style="display: none" onclick="punbbCollapse(this); return false;">Свернуть</button> <button onclick="punbbSelect(this); return false;">Выбрать</button> <button onclick="punbbPopup(this); return false;">Всплывающее окно</button></div><pre class="highlight punbb_block">' + sContent + '</pre>');
codebox.remove();
});
jQuery.getScript('http://balupton.github.io/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js', function () {
jQuery.SyntaxHighlighter.init({
'wrapLines': false
})
})
});
function punbbExpand(oThis) {
jQuery(oThis).css('display', 'none');
jQuery(oThis).next().css('display', '');
jQuery(oThis).parent().next('pre.punbb_block').addClass('expand');
}
function punbbCollapse(oThis) {
jQuery(oThis).css('display', 'none');
jQuery(oThis).prev().css('display', '');
jQuery(oThis).parent().next('pre.punbb_block').removeClass('expand');
}
function punbbPopup(oThis) {
var content = jQuery(oThis).parent().next('pre.punbb_block').html();
var my_window = window.open("","PunBB_Code","scrollbars=1,toolbar=no,menubar=no,personalbar=no,status=0,left=0,location=0,menubar=0,top=0,width=640,height=350");
my_window.document.write('<pre>'+content+'</pre>');
}
function punbbSelect(oThis) {
var doc = document;
var text = jQuery(oThis).parent().next('pre.punbb_block')[0];
if (doc.body.createTextRange) {
var range = doc.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = doc.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
}
Последний раз редактировалось: Феникс (Вт 22 Ноя - 20:18), всего редактировалось 1 раз(а)
Феникс- Администратор
Посты : 1598
Очки : 6553
Возраст : 52
Откуда : Россошь
Подсветка от Яндекса
Скрипт :
В таблицу стилей :
Замечу, что "языков" для подсветки много.
- Код:
$(function(){var a=$("dl.codebox dd").find("code, div.cont_code");0!=a.length&&$.ajax({url:"http://yandex.st/highlightjs/8.0/highlight.min.js",cache:!0,dataType:"script",success:function(){hljs.configure({useBR:!0});a.each(function(a,b){hljs.highlightBlock(b)})}})});
В таблицу стилей :
- Код:
.hljs {
display: inline-block;
padding: 0.5em;
color: #333;
background: #f8f8f8;
}
.hljs-comment,
.hljs-template_comment,
.diff .hljs-header,
.hljs-javadoc {
color: #998;
font-style: italic;
}
.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.javascript .hljs-title,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
color: #333;
font-weight: bold;
}
.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
color: #099;
}
.hljs-string,
.hljs-tag .hljs-value,
.hljs-phpdoc,
.tex .hljs-formula {
color: #d14;
}
.hljs-title,
.hljs-id,
.coffeescript .hljs-params,
.scss .hljs-preprocessor {
color: #900;
font-weight: bold;
}
.javascript .hljs-title,
.lisp .hljs-title,
.clojure .hljs-title,
.hljs-subst {
font-weight: normal;
}
.hljs-class .hljs-title,
.haskell .hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
color: #458;
font-weight: bold;
}
.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rules .hljs-property,
.django .hljs-tag .hljs-keyword {
color: #000080;
font-weight: normal;
}
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body {
color: #008080;
}
.hljs-regexp {
color: #009926;
}
.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
color: #990073;
}
.hljs-built_in,
.lisp .hljs-title,
.clojure .hljs-built_in {
color: #0086b3;
}
.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
color: #999;
font-weight: bold;
}
.hljs-deletion {
background: #fdd;
}
.hljs-addition {
background: #dfd;
}
.diff .hljs-change {
background: #0086b3;
}
.hljs-chunk {
color: #aaa;
}
Замечу, что "языков" для подсветки много.
Феникс- Администратор
Посты : 1598
Очки : 6553
Возраст : 52
Откуда : Россошь
Re: Подсветка синтаксиса
Найдите в шаблоне overall_header строчки :
И добавьте ниже следующий код:
Результат :
Как видите, при клике на иконку в правом верхнем углу контейнера кода, он копируется в буфер обмена.
- Код:
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
И добавьте ниже следующий код:
- Код:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/github-gist.min.css">
<style>
dl.codebox:not(.spoiler) dt {
display: none;
}
dl.codebox:not(.spoiler) dd {
border: 0 none;
background: #f8f8f8;
position: relative;
max-height: 100%;
}
.clipboard {
display: block;
color: #333;
position: absolute;
right: 4px;
top: 4px;
background: url(http://i.imgur.com/o9NOYtH.png) no-repeat center center #eee;
border: 1px solid #D5D5D5;
width: 30px;
height: 30px;
text-align: center;
border-radius: 3px;
transition: opacity 0.3s ease-in-out 0s;
opacity: 0;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-appearance:none;
cursor: pointer;
}
.clipboard.check-circle {
background-image: url(http://i.imgur.com/CBEkyLH.png);
}
.clipboard.exclamation-triangle {
background-image: url(http://i.imgur.com/QQkE9Wj.png);
}
dl.codebox:not(.spoiler) dd:hover .clipboard {
opacity: 1;
}
.clipboard:hover {
background-color:#ddd;
border-color:#ccc;
}
.hljs {
background: #f8f8f8;
}
dl.codebox:not(.spoiler) code,
.codebox:not(.spoiler) dd.cont_code {
max-height: 100%;
margin: 0;
}
.codebox:not(.spoiler) {
background-color: transparent;
border: 0 none;
margin: 0;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
<script>
/* Zzhljs - http://devs.forumvi.com */
jQuery(function($){
var $code = $("code");
if ($code.length) {
hljs.configure({
useBR: true
});
$code.each(function (i, block) {
hljs.highlightBlock(block);
});
function fallbackMessage(action) {
var actionMsg = '';
var actionKey = (action === 'cut' ? 'X' : 'C');
if (/iPhone|iPad/i.test(navigator.userAgent)) {
actionMsg = 'No support!';
} else if (/Mac/i.test(navigator.userAgent)) {
actionMsg = 'Press ⌘-' + actionKey + ' to ' + action;
} else {
actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action;
}
return actionMsg;
}
function afterClipboard(ele) {
setTimeout(function(){
ele.className = 'clipboard clipboard';
}, 400);
}
var snippets = document.querySelectorAll('.codebox:not(.spoiler) > dd');
[].forEach.call(snippets, function (snippet) {
snippet.firstChild.insertAdjacentHTML('beforebegin', '<i class="clipboard clipboard" data-clipboard></i>');
});
var clipboardSnippets = new Clipboard('[data-clipboard]', {
target: function (trigger) {
return trigger.nextElementSibling;
}
});
clipboardSnippets.on('success', function (e) {
e.clearSelection();
e.trigger.className = 'clipboard check-circle';
afterClipboard(e.trigger);
});
clipboardSnippets.on('error', function (e) {
e.trigger.className = 'clipboard exclamation-triangle';
afterClipboard(e.trigger);
alert(fallbackMessage(e.action));
});
}
});
</script>
Результат :
Как видите, при клике на иконку в правом верхнем углу контейнера кода, он копируется в буфер обмена.
Феникс- Администратор
Посты : 1598
Очки : 6553
Возраст : 52
Откуда : Россошь
Страница 1 из 1
URL: | |
BBCode: | |
HTML: |
Права доступа к этому форуму:
Вы не можете отвечать на сообщения
Вт 29 Мар - 7:21 автор Nataliya
» Шаман......
Вт 29 Мар - 7:19 автор Nataliya
» [Салаты] Пять ошибок при приготовлении оливье
Ср 26 Янв - 13:20 автор Scheila
» Наша Беседка.. :)
Сб 18 Дек - 13:17 автор Феникс
» Супы из рыбы и морепродуктов
Вт 14 Дек - 22:26 автор Scheila
» Другие закуски
Вт 14 Дек - 22:25 автор Scheila
» Теперь мы есть в Telegram
Чт 26 Авг - 7:59 автор Феникс
» мои клипы.
Ср 4 Авг - 20:55 автор Nataliya
» МОМЕНТЫ ЖИЗНИ
Ср 4 Авг - 20:44 автор Nataliya